import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { test_Console } from './A';
import { testLodash } from './lodash/test_lodash';
import { testEs6 } from './es6/index';
import { testJS } from './js/index';
import { mock } from './mock/Mock';
import { testJest } from './jest/index';
import { testJson } from './json/index';

import { increment, decrement } from './Redux/PureReducers';

class App extends Component {
	_onClick = () => {
		// this._onClick_4_test_lodash();
		// this._onClick_4_test_es6();
		this._onClick_4_test_js();
		// this._onClick_4_mock();
		// this._onClick_4_Jest();
	};
	_onClick_4_test_lodash() {
		testLodash('reduce');
	}

	_onClick_4_test_es6() {
		testEs6('return_global_var_twice');
	}

	_onClick_4_test_js() {
		testJS('sync');
	}

	_onClick_4_mock() {
		mock('convert');
	}

	_onClick_4_Jest() {
		testJest('sync');
	}

	_onClick_4_Json() {
		testJson();
	}

	render() {
		this._onClick();

		return (
			<div className='App'>
				<header className='App-header'>
					<img src={logo} className='App-logo' alt='logo' />
					<p>
						Edit <code>src/App.js</code> and save to reload.
					</p>
					<a className='App-link' href='https://reactjs.org' target='_blank' rel='noopener noreferrer'>
						Learn React
					</a>

					<button className='App-header-btn' onClick={this._onClick_4_test_lodash}>
						Test Lodash
					</button>

					<button className='App-header-btn' onClick={this._onClick_4_test_es6}>
						Test ES6
					</button>

					<button className='App-header-btn' onClick={this._onClick_4_test_js}>
						Test JS
					</button>
					<button className='App-header-green-btn' id='click_green' onClick={this._onClick_4_test_js}>
						Cliek green
					</button>

					<button className='App-header-btn' onClick={this._onClick_4_mock}>
						Mock
					</button>

					<button className='App-header-btn' onClick={this._onClick_4_increment}>
						Mock Redux - Increment
					</button>

					<button className='App-header-btn' onClick={this._onClick_4_Jest}>
						Test about Jest
					</button>

					<button className='App-header-btn' onClick={this._onClick_4_Json}>
						Test Json
					</button>
				</header>
			</div>
		);
	}

	_onClick_4_increment() {
		increment();
	}
	_onClick_4_decrement() {
		decrement();
	}
}

export default App;
